<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>商城</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="../common/css/swiper.min.css" />
		<link rel="stylesheet" href="./css/index.css" />
		<style type="text/css">
			#app {
				height: 100%;
			}
			.swiper-container {
				width: 6.86rem;
				height: 2.88rem;
				border-radius: 0.16rem;
				margin-top: 0.32rem;
			}
			.my-swipe .van-swipe-item{
				margin-right: 0.26rem;
				padding: 0;
				width: 1.96rem!important;
			}
		</style>
	</head>

	<body style="-webkit-text-size-adjust: 100% !important">
		<div id="app" v-cloak>
			<div class="id_container">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div
							class="swiper-slide"
							v-for="(item,index) in images"
							:key="index"
						>
							<img :src="item" style="width: 100%" @click="toDetail(item,index)" />
						</div>
					</div>
					<div class="swiper-pagination swiper-pagination-white"></div>
				</div>
				<div class="hot">
					<div class="title">
						<span>热销推荐</span>
						<img src="./img/icon/shangcheng-rexiao.png">
					</div>
					<div v-if="hotList.length>0">
						<van-swipe
						class="my-swipe"
						:loop="false"
						width="100"
						:show-indicators="false"
					>
						<van-swipe-item v-for="item in hotList" :key="item">
							<div class="hot_list" @click="handleClick(item)">
								<img :src="item.product_thumb">
								<p>￥{{item.product_price}}</p>
							</div>
						</van-swipe-item>
					</van-swipe>
					</div>
				</div>
				<van-tabs v-model:active="active" @click="onClick" sticky>
					<van-tab
							v-for="(item1,index) in tab"
							:key="index"
							:title="item1.name"
						>
					</van-tab>
					<template v-if="switchList.length>0">
						<div class="product">
							<div class="item" v-for="item in switchList" @click="handleClick(item)">
								<div class="banner">
									<img :src="item.product_enter_pic">
									<p>{{item.product_name}}</p>
									<span v-if="item.product_tag" :style="item.product_tag=='热门'?'background:#FB4E24':'background:#4FE4AA'" class="tag">{{item.product_tag}}</span>
									<div class="price">
										<span class="left_price">￥{{item.product_price}}</span>
										<span class="rigth_price">已售{{item.sales||0}}</span>
									</div>
								</div>
							</div>
						</div>
					</template>
						<template v-else>
							<div>
								<img style="width: 200px;height:200px;margin-left:calc(50% - 100px);" src="./img/icon/gouwuche-kong.png" />
								<p style="text-align: center;font-size: 0.32rem;">暂无商品</p>
							</div>
						</template>
				</van-tabs>
				<link-index></link-index>
					
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js?time=202209061458"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="./js/adjust.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../common/js/swiper.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'
		import { throttle } from './js/utils.js'

		const PatientData = {
			data() {
				return {
					images: [
						'./img/banner1.png',
						'./img/banner2.png',
					],
					loading: false,
					finished: false,
					queryParams: {
						page: 1,
						pagesize: 10,
					},
					tab:[
						{
							id:1,
							name:'监测设备'
						},
						{
							id:2,
							name:'服务'
						},
						{
							id:3,
							name:'营养餐包'
						}
					],
					active:0,
					hotList:[],
					switchList:[],
					list: [],
					total: 0,
					patient_id:''
				}
			},
			created() {
				this.patient_id = url('?patient_id')
				localStorage.setItem('patientId',this.patient_id)
				this.getList()
				console.log(navigator.userAgent.toLowerCase())
			},
			mounted(){
				this.initSwiper()
			},
			methods: {
				getList() {
					this.queryParams.parent = ['1469536463686222848', '1469536539175308288', '1469569427593773056']
					getAction(spliceUrl('/shop/product/list/v2'), {patient_id:this.patient_id}).then(
						res => {
							res = res.data
							console.log(res)
							if (res.success) {
								// this.loading = false
								this.list = res.data.list
								this.hotList = res.data.hot
								this.switchList = this.list[0].products
								// this.total = res.data.length
								// if (this.list.length == this.total) {
								// 	this.finished = true
								// }
							}
						}
					)
				},
				onClick(item){
					this.switchList = this.list[item].products
				},
				toDetail(item,index){
					if(index==1){
						window.location.href = "./detail.html?id="+3+'&type='+1+'&pid='+this.patient_id
					} else {
						return
					}
				},
				initSwiper() {
					new Swiper('.swiper-container', {
						loop: true,
						loopAdditionalSlides: 2,
						autoplay: {
							delay: 2000,
							disableOnInteraction: false,
							stopOnLastSlide: false,
						},
						centeredSlides: true,
						observer: true,
						observeParents: true,
						effect: 'slide',
						pagination: {
							el: '.swiper-pagination',
							clickable: true,
						},
					})
				},
				handleClick(item) {
					window.location.href = "./detail.html?id="+item.data_id+'&type='+item.product_category+'&pid='+this.patient_id
				},
			},
			components: {
				linkIndex: linkIndex,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
